<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <router-link to="/index">首页</router-link>
        <router-link to="/article">文章</router-link>
    </div>
    <router-view></router-view>
</div>
</body>

<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
<script type="text/javascript">
    const Index=Vue.component('index',{
        template:'<div>Hello,欢迎使用慕课网学习Vue教程！</div>'
    })

    const Article=Vue.component('myArticle',{
        template: '<div><div><router-link to="/article/vue">vue</router-link><router-link to="/article/react">react</router-link></div></div>',
    })

    const VueArticle=Vue.component('vueArticle',{
        template:'<ul><li>1.Vue基础学习</li><li>2.Vue项目实战</li></ul>',
    })

    const ReactArticle=Vue.component('reactArtcle',{
        template:'<ul><li>1.React基础学习</li><li>2.React项目实战</li></ul>'
    })

    const routes=[
        {path:'/index',component:Index},
        {
            path: '/article',
            component: Article,
            children:[
                {
                    path:'vue',
                    component:VueArticle,
                },
                {
                    path: 'react',
                    component: ReactArticle,
                }
            ]
        }
    ]

    const router=new VueRouter({
        routes:routes
    })

    var vm=new Vue({
        el:'#app',
        router,
        data(){
            return {}
        }
    })
</script>
</html>
